<template>
  <div class="app-cont">
        <alertTip v-if="showAlert" @closeTip="go()" :alertText="alertText"></alertTip>

    <!--这是 Header 区域 -->
    <!--<headers title="个人信息"></headers>-->
    <div class="main">
      <div class="main-container">
        <div class="fenlei">
          <div class="yi">
            <div id="demo">
              <!-- 遮罩层 -->
              <div class="container" v-show="panel">
                <div>
                  <img id="image" :src="url" alt="Picture">
                </div>
                <button type="button" id="button" @click="crop">确定</button>
              </div>
              <div style="padding:20px;">
                <div class="tx">我的头像</div>
                <div class="show">
                  <!--<div class="picture" :style="'backgroundImage:url('+headerImage+')'">
                    <input type="file" id="change" accept="image" @change="change">
                  </div>-->
                  <img :src="url" class="picture" >
                  <input type="file" id="change" accept="image" @change="change">
                </div>
              </div>
            </div>
            <!--<mt-field type="number" label="我的头像">
              <div class="mint-field-other" @click="chooseImage()">

              </div>
            </mt-field>-->
          </div>
          <div class="er">
            <mt-field type="text" label="会员名">
              <div class="mint-cell-value"><input type="text" class="mint-field-core huiyuan" v-model="userInfo.nickName">
                <div class="mint-field-other">&gt;</div>
              </div>
            </mt-field>
            <a @click.natvie="isshow=!isshow" class="xuanze">性别 <span>{{userInfo.gender == 1 ? "男" : "女"}} &nbsp &nbsp &gt</span></a>
            <mt-field label="生日" placeholder="请输入生日" type="date" v-model="userInfo.birthday" class="birthday"
                      disableClear>&gt
            </mt-field>
          </div>
          <div class="san">

            <!--<p @click="code">我的二维码<img src="../assets/images/shops/erweima.png" alt=""></p>-->
            <p @click="ModifyPhone">修改手机<span>&gt</span></p>
            <p @click="ModifyPwd">修改密码 <span>&gt</span></p>
          </div>

          <mt-picker :slots="slots" @change="onValuesChange" v-show="isshow" v-model="userInfo.gender"></mt-picker>

          <div class="btn">
            <a href="javascript:;" class="btn-next" @click="setDate()">保存修改</a>
          </div>
        </div>
      </div>
    </div>
    <!--遮罩层-->
    <!--<div class="zhezhao" v-if='zhezhao1' @click="zzceng1()">-->
      <!--<div class="zzc1_content" v-if="zzc1">-->
        <!--<div class="content">-->
          <!--<div class="tupian">-->
            <!--&lt;!&ndash;<img src="./../assets/images/shops/erweima.png" alt="">&ndash;&gt;-->
            <!--<canvas class="tupian" id="canvas"></canvas>-->
          <!--</div>-->
        <!--</div>-->
      <!--</div>-->
    <!--</div>-->
  </div>
</template>
<script>
  /* eslint-disable semi */
  import Vue from 'vue'
//  import QRCode from 'qrcode'
//  Vue.use(QRCode)
  import wx from 'weixin-js-sdk'
  import { wxHttpTool,wx_config, http_getParam, get_shopQrcoe,wx_share,wx_hideAllMenu } from '../components/httpUtil/httpUtil'
  import {msg_10046} from '../message/msg_10046'
  import Cropper from 'cropperjs'
  import {relogin} from "../components/httpUtil/httpUtil";

  export default {
    components: {},
    name: 'Invitation',
    data () {
      return {
//        userInformation: {},
        headerImage: '',
        picValue: '',
        cropper: '',
        croppable: false,
        panel: false,
        url: window.localStorage.url,
        zhezhao1: false,
        zzc1: false,
        checked: false,
        userInfo: {}, // 请求到的数据
        isshow: false,
        value: '',
        slots: [
          {
            values: ['女', '男']
          }
        ],
        showAlert:false,
        alertText:null
      }
    },
    mounted () {
      this.userInfo = JSON.parse(window.localStorage.data)
      //初始化这个裁剪框
      var self = this;
      var image = document.getElementById('image');
      this.cropper = new Cropper(image, {
        aspectRatio: 1,
        viewMode: 1,
        background: false,
        zoomable: false,
        ready: function () {
          self.croppable = true;
        }
      });


    },
    methods: {
      alertTip(msg){
        this.showAlert = true;
        this.alertText = msg;
      },
      go(){
        this.showAlert = false
        },
      getObjectURL (file) {
        let url = null;
        if (window.createObjectURL != undefined) { // basic
          url = window.createObjectURL(file);
        } else if (window.URL != undefined) { // mozilla(firefox)
          url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
          url = window.webkitURL.createObjectURL(file);
        }
        return url;

      },
      change (e) {
        let files = e.target.files || e.dataTransfer.files;
        if (!files.length) return;
        this.panel = true;
        this.picValue = files[0];

        this.url = this.getObjectURL(this.picValue);
        //每次替换图片要重新得到新的url
        if (this.cropper) {
          this.cropper.replace(this.url);
        }
        this.panel = true;

      },
      crop () {
        this.panel = false;
        var croppedCanvas;
        var roundedCanvas;

        if (!this.croppable) {
          return;
        }
        // Crop
        croppedCanvas = this.cropper.getCroppedCanvas();
        console.log(this.cropper)
        // Round
        roundedCanvas = this.getRoundedCanvas(croppedCanvas);

        this.headerImage = roundedCanvas.toDataURL();
        this.postImg()
        console.log(this.headerImage)

      },
      getRoundedCanvas (sourceCanvas) {

        var canvas = document.createElement('canvas');
        var context = canvas.getContext('2d');
        var width = sourceCanvas.width;
        var height = sourceCanvas.height;

        canvas.width = width;
        canvas.height = height;

        context.imageSmoothingEnabled = true;
        context.drawImage(sourceCanvas, 0, 0, width, height);
        context.globalCompositeOperation = 'destination-in';
        context.beginPath();
        context.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, 2 * Math.PI, true);
        context.fill();

        return canvas;
      },
      postImg () {
        const jsonValue = JSON.stringify({
          "c": "10047",
          "p": {
            "userId": JSON.parse(window.localStorage.data).id,
            "tokenId": token(),
            "img": this.headerImage
          }
        });
        this.$http.post('http://192.168.20.109:8080/earnlot/qqs.us', jsonValue).then((res) => {
          this.url = res.data.p.headImg;
          window.localStorage.url=this.url
        })

      },
      // 二维码
//      useqrcode(){
//        let canvas = document.getElementById('canvas')
//        let canvs = QRCode.toCanvas(canvas, '欢迎关注伊杭优品', function (error) {
//          if (error) console.error(error)
//          console.log('success!');
//        })
//      },
      // 发送数据
      setDate(){
        const jsonValue = JSON.stringify({
          'c': '10029',
          'p': {
            'userId': JSON.parse(window.localStorage.data).id,  // 帐号
            'tokenId': token(),
            'gender': this.userInfo.gender,  //性别：0:女  1:男
            'mobile': this.userInfo.mobile, // 联系电话
            'nickName': this.userInfo.nickName, // 昵称
            'birthday': this.userInfo.birthday, // 出生日期
            'headImg': this.url
          }
        })
        this.$http.post(api + '/qqs.us', jsonValue).then((res) => {
          console.log(res)
          if (res.data.p.isTrue) {
//            window.localStorage.data = JSON.stringify(res.data.p.userInfo)
//            this.userInfo=res.data.p.userInfo
            this.$router.push({name: 'myHome', params: {}})
          } else {
            this.alertTip(res.data.p.errorMsg);
                if (res.data.perrorCode === 90) {
                  this.go = ()=> {
                    this.showAlert = false
                    let _this = this;
                    relogin(_this)
                  }
                }
          }
        }, (res) => {
          this.alertTip("网络错误");
          this.go = function(){
             this.showAlert = false;
          }
        })
      },

      onValuesChange(picker, values) {
        this.value = values[0];
        this.userInfo.gender = this.value == '女' ? 0 : 1
        console.log(this.value)
        console.log(this.userInfo.gender)
        setTimeout(() => {
          this.isshow = false
        }, 500)
      },
      ischecked () {
        this.checked = true
      },
      ModifyPwd () {
        this.$router.replace({name: 'newPassword'})
      },
//      code () {
//        this.zhezhao1 = true;
//        this.zzc1 = true;
//      },
//      zzceng1 () {
//        // 点击遮罩层关闭
//        this.zhezhao1 = false;
//        this.zzc1 = false;
//      },
      ModifyPhone () {
        this.$router.replace({name: 'ModifyPhone'})
      }
    },
    created(){  wxHttpTool.wxAuthor(this, function (varRet, varJson, varThis = this) {
      if (varRet == -1) {
        varThis.alertTip('网络错误');
        varThis.go = function () {
          varThis.showAlert = false;
        }

      }
      // 关注钱应该判断下是否已经关注过了
      msg_10046.send(varThis,msg_10046.entity(),function(varThis,res){
        varThis.wxlist=res.data.p.sign
        wx_config(varThis.wxlist);
        wx_hideAllMenu();
        wx.hideMenuItems({
          //禁用单独分享朋友圈QQ空间等功能
          menuList: ["menuItem:share:timeline","menuItem:share:QZone","menuItem:share:qq"] // 要隐藏的菜单项，所有menu项见附录3
        });
      })


    },this.type)},
    updated () {
      this.useqrcode()
    }
  }
</script>
<style lang="scss" scoped>
  .app-cont {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    /*padding: 80px 0 0;*/
    box-sizing: border-box;
    .header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 80px;
    }
    .main {
      flex: 1;
      position: relative;
      .main-container {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;
      }
    }
  }

  .fenlei {
    width: 100%;
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    ::-webkit-scrollbar {
      display: none;
    }
    .btn {
      width: 100%;
      height: 120px;
      text-align: center;
      line-height: 120px;
      background: #f4f4f4;
      position: fixed;
      bottom: 0;
      .btn-next {
        background-color: #fff;
        display: inline-block;
        width: 580px;
        height: 74px;
        margin: 0;
        border-radius: 35px;
        border: 1px solid #fe3519;
        color: #fe3519;
        text-align: center;
        line-height: 74px;
        font-size: 26px;
      }
    }
  }

  /*立即参团遮罩层*/
  /*.zhezhao {*/
    /*width: 100%;*/
    /*height: 100%;*/
    /*background: rgba(0, 0, 0, 0.7);*/
    /*z-index: 20000;*/
    /*position: fixed;*/
    /*top: 0px;*/
  /*}*/

  /*.zhezhao .zzc1_content {*/
    /*!*width: 500px;*!*/
    /*!*height: 240px;*!*/
    /*!*background: #fff;*!*/
    /*position: absolute;*/
    /*top: 260px;*/
    /*!*right: 78px;*!*/
    /*left: 50%;*/
    /*!*transform: translate(-50%, 0); 左边50%，再平移自身的-50%*!*!*/
    /*display: flex;*/
    /*justify-content: center;*/
    /*align-items: center;*/
    /*flex-direction: column;*/
  /*}*/

  /*.zhezhao {*/
    /*.zzc1_content .content {*/
      /*.tupian {*/
        /*width: 307px;*/
        /*height: 307px;*/
        /*margin: 100px auto 28px;*/
        /*border: none;*/
        /*> img {*/
          /*width: 100%;*/
          /*height: 100%;*/
          /*border: none;*/
        /*}*/
      /*}*/
    /*}*/
  /*}*/

  .sixs {
    width: 100%;
    p {
      width: 100%;
      height: 80px;
      text-align: center;
      line-height: 80px;
      font-size: 28px;
    }
    .nan {
      border-bottom: 2px solid #f4f4f4;
    }
  }

  .xuanze {
    display: block;
    background-color: #fff;
    line-height: 94px;
    padding-left: 36px;
    padding-right: 36px;
    box-sizing: border-box;
    border-bottom: 1px solid #f1f1f1;
    border-top: 2px solid #f4f4f4;
    /*margin-top: 20px;*/
    width: 100%;
    height: 94px;
    font-size: 26px;
    color: #000;
    > span {
      float: right;
    }
  }
</style>
<style lang="scss">
  .huiyuan {
    margin-right: 20px !important;
  }

  .picker-slot-wrapper {
    width: 620px;
  }

  .picker {
    overflow-x: hidden;
    overflow: visible;
    width: 100%;
    height: 400px;
  }

  .picker-items {
    z-index: 555;
    float: inherit;
    position: fixed;
    bottom: 0;
    /*<!--top:-400px;-->*/
    width: 100%;
    /*height: 400px;*/
    background-color: #fff;
  }

  .mt-header {
    background: black;
    height: 80px;
  }

  .birthday {
    input::-webkit-input-placeholder {
      font-size: 50px;
    }
    width: 100%;
    .mint-cell-value {
      width: 200px;
      text-align: right;
      padding-right: 0;
    }
    .mint-field-core {
      background-color: #fff;
      margin-right: -40px;
      box-sizing: border-box;
      padding-left: 150px;
      padding-right: 0;
      text-align: right;
      width: 200px;
      height: 90px;
    }
  }

  a:hover, a:visited, a:link, a:active {
    text-decoration: none;
    outline: none;
  }

  .yi {
    border-bottom: 1px solid #f4f4f4;
    .mint-cell {
      height: 112px;
      box-sizing: border-box;
      padding-left: 20px;
      padding-right: 30px;
      .mint-field-core {
        background-color: #fff;
      }
      .mint-field-other {
        width: 90px;
        height: 90px;
        border-radius: 50%;
        > img {
          width: 100%;
          height: 100%;
        }
      }
      .mint-cell-wrapper {
        font-size: 26px;
      }
    }
  }

  .er {
    margin-top: 20px;
    .mint-cell {
      height: 94px;
      box-sizing: border-box;
      padding-left: 20px;
      padding-right: 20px;
    }
    .mint-cell:last-child{
      background-size: 100% 0;
    }
    .mint-field-core {
      text-align: right;
      box-sizing: border-box;
      padding-right: 18px;
      /*color: #a1a1a1;*/
      background-color: #fff;
      color: #000;
    }
    .mint-cell-wrapper {
      background-image: none;
      /*border-bottom: 1px solid #f4f4f4;*/
      font-size: 26px;
    }
  }

  .san {
    /*padding-top: 20px;*/
    > p {
      background-color: #fff;
      line-height: 94px;
      padding-left: 36px;
      padding-right: 36px;
      box-sizing: border-box;
      border-bottom: 2px solid #f1f1f1;
      /*margin-top: 20px;*/
      width: 100%;
      height: 94px;
      font-size: 26px;
      &:first-child{
        border-top: 1px solid #f1f1f1;
      }
      &:last-child{
        span{
          margin-right: -14px;
        }
      }
      > img {
        margin-top: 24px;
        float: right;
        width: 48px;
        height: 48px;
      }
      > span {
        float: right;
        /*padding-right: 20px;*/
      }
    }
  }

  #canvas {
    width: 307px !important;
    height: 307px !important;
    margin: 0 auto 0 !important;
    margin-left: 14px !important;
    border: none;
  }

  /////////////////
  .tx {
    width: 120px;
    height: 100px;
    float: left;
    line-height: 80px;
    font-size: 26px;
  }

/*  input[type="file"] {
    position: absolute;
    float: left;
    z-index: 100000;
    opacity: 1;
    width: 100px;
    height: 100px;
  }*/
  input[type="file"]{
    position: absolute;
    float: left;
    z-index: 10;
    opacity: 0;
    width: 100px;
    height: 100px;
  }

  #button {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 80px;
    height: 40px;
    border: none;
    border-radius: 5px;
    background: white;
  }

  .show {
    width: 100px;
    height: 100px;
    overflow: hidden;
    position: relative;
    border-radius: 50%;
    border: 1px solid #d5d5d5;
    float: right;
    margin-top: -15px;
  }
/*
  .picture {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    display: block;

  }*/
  .picture{
    position: absolute;
    z-index: 9;
    float: left;
    width: 100px;
    height: 100px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;
    border: 1px solid #d5d5d5;
  }

  .container {
    z-index: 99;
    position: fixed;
    padding-top: 60px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 1);
  }

  #image {
    max-width: 100%;
  }

  .cropper-view-box, .cropper-face {
    border-radius: 50%;
  }

  .cropper-container {
    font-size: 0;
    line-height: 0;

    position: relative;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

    direction: ltr;
    -ms-touch-action: none;
    touch-action: none
  }

  .cropper-container img {
    /* Avoid margin top issue (Occur only when margin-top <= -height) */
    display: block;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    max-height: none !important;
    width: 100%;
    height: 100%;
    image-orientation: 0deg
  }

  .cropper-wrap-box,
  .cropper-canvas,
  .cropper-drag-box,
  .cropper-crop-box,
  .cropper-modal {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

  .cropper-wrap-box {
    overflow: hidden;
  }

  .cropper-drag-box {
    opacity: 0;
    background-color: #fff;
  }

  .cropper-modal {
    opacity: .5;
    background-color: #000;
  }

  .cropper-view-box {
    display: block;
    overflow: hidden;

    width: 100%;
    height: 100%;

    outline: 1px solid #39f;
    outline-color: rgba(51, 153, 255, 0.75);
  }

  .cropper-dashed {
    position: absolute;

    display: block;

    opacity: .5;
    border: 0 dashed #eee
  }

  .cropper-dashed.dashed-h {
    top: 33.33333%;
    left: 0;
    width: 100%;
    height: 33.33333%;
    border-top-width: 1px;
    border-bottom-width: 1px
  }

  .cropper-dashed.dashed-v {
    top: 0;
    left: 33.33333%;
    width: 33.33333%;
    height: 100%;
    border-right-width: 1px;
    border-left-width: 1px
  }

  .cropper-center {
    position: absolute;
    top: 50%;
    left: 50%;

    display: block;

    width: 0;
    height: 0;

    opacity: .75
  }

  .cropper-center:before,
  .cropper-center:after {
    position: absolute;
    display: block;
    content: ' ';
    background-color: #eee
  }

  .cropper-center:before {
    top: 0;
    left: -3px;
    width: 7px;
    height: 1px
  }

  .cropper-center:after {
    top: -3px;
    left: 0;
    width: 1px;
    height: 7px
  }

  .cropper-face,
  .cropper-line,
  .cropper-point {
    position: absolute;

    display: block;

    width: 100%;
    height: 100%;

    opacity: .1;
  }

  .cropper-face {
    top: 0;
    left: 0;

    background-color: #fff;
  }

  .cropper-line {
    background-color: #39f
  }

  .cropper-line.line-e {
    top: 0;
    right: -3px;
    width: 5px;
    cursor: e-resize
  }

  .cropper-line.line-n {
    top: -3px;
    left: 0;
    height: 5px;
    cursor: n-resize
  }

  .cropper-line.line-w {
    top: 0;
    left: -3px;
    width: 5px;
    cursor: w-resize
  }

  .cropper-line.line-s {
    bottom: -3px;
    left: 0;
    height: 5px;
    cursor: s-resize
  }

  .cropper-point {
    width: 5px;
    height: 5px;

    opacity: .75;
    background-color: #39f
  }

  .cropper-point.point-e {
    top: 50%;
    right: -3px;
    margin-top: -3px;
    cursor: e-resize
  }

  .cropper-point.point-n {
    top: -3px;
    left: 50%;
    margin-left: -3px;
    cursor: n-resize
  }

  .cropper-point.point-w {
    top: 50%;
    left: -3px;
    margin-top: -3px;
    cursor: w-resize
  }

  .cropper-point.point-s {
    bottom: -3px;
    left: 50%;
    margin-left: -3px;
    cursor: s-resize
  }

  .cropper-point.point-ne {
    top: -3px;
    right: -3px;
    cursor: ne-resize
  }

  .cropper-point.point-nw {
    top: -3px;
    left: -3px;
    cursor: nw-resize
  }

  .cropper-point.point-sw {
    bottom: -3px;
    left: -3px;
    cursor: sw-resize
  }

  .cropper-point.point-se {
    right: -3px;
    bottom: -3px;
    width: 20px;
    height: 20px;
    cursor: se-resize;
    opacity: 1
  }

  @media (min-width: 768px) {

    .cropper-point.point-se {
      width: 15px;
      height: 15px
    }
  }

  @media (min-width: 992px) {

    .cropper-point.point-se {
      width: 10px;
      height: 10px
    }
  }

  @media (min-width: 1200px) {

    .cropper-point.point-se {
      width: 5px;
      height: 5px;
      opacity: .75
    }
  }

  .cropper-point.point-se:before {
    position: absolute;
    right: -50%;
    bottom: -50%;
    display: block;
    width: 200%;
    height: 200%;
    content: ' ';
    opacity: 0;
    background-color: #39f
  }

  .cropper-invisible {
    opacity: 0;
  }

  .cropper-bg {
    background-image: url('');
  }

  .cropper-hide {
    position: absolute;

    display: block;

    width: 0;
    height: 0;
  }

  .cropper-hidden {
    display: none !important;
  }

  .cropper-move {
    cursor: move;
  }

  .cropper-crop {
    cursor: crosshair;
  }

  .cropper-disabled .cropper-drag-box,
  .cropper-disabled .cropper-face,
  .cropper-disabled .cropper-line,
  .cropper-disabled .cropper-point {
    cursor: not-allowed;
  }


</style>
